<template>
    <div class="xzcs-pc-imformation-detail">
        <div class="page-left">
            <div v-if="info" class="content">
                <div class="caozuo-list">
                    <div class="top">
                        <i class="el-icon-s-home"></i>
                        <div class="title">当前位置:</div>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <nuxt-link to="/">首页</nuxt-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>
                                <nuxt-link to="/information/rmzx/1"
                                    >小竹资讯</nuxt-link
                                >
                            </el-breadcrumb-item>
                            <el-breadcrumb-item v-if="info">
                                <nuxt-link
                                    v-if="info.tid == 3"
                                    to="/information/czzx/1"
                                    >财政资讯</nuxt-link
                                >
                                <nuxt-link
                                    v-if="info.tid == 1"
                                    to="/information/kszx/1"
                                    >考试资讯</nuxt-link
                                >
                                <nuxt-link
                                    v-if="info.tid == 2"
                                    to="/information/sjjc/1"
                                    >税局稽查</nuxt-link
                                >
                                <nuxt-link
                                    v-if="info.tid == 4"
                                    to="/information/ggwz/1"
                                    >财税分享</nuxt-link
                                >
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>
                                <div class="breadcrumb-title">
                                    {{ info && info.title }}
                                </div>
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="caozuo-item" @click="setCollection">
                        <img
                            :src="info.is_collect ? collectionS : collection"
                            alt="收藏"
                        />
                        收藏
                    </div>
                    <div class="caozuo-item" @click="changeFontSize">
                        <img src="~/assets/images/regulations/T.png" alt="" />
                        字体
                    </div>
                </div>
                <h1 class="title">
                    {{ info.title }}
                </h1>
                <div class="info">
                    <div>文章来源：{{ info.resource }}</div>
                    <div>时间：{{ info.push_date }}</div>
                </div>
                <no-ssr>
                    <div class="pic">
                        <el-image
                            v-if="info && info.pic"
                            class="img"
                            :src="info.pic"
                            :alt="info.title"
                            fit="cover"
                            lazy
                        ></el-image>
                    </div>
                </no-ssr>
                <div
                    class="parse"
                    :class="[fontSizeList[fontSizeIndex]]"
                    v-html="info.content"
                ></div>

                <div v-if="info" class="prev-next">
                    <div v-if="info.prevdata">
                        <div class="name">
                            上一篇：
                            <nuxt-link
                                :to="`/information/${info.prevdata.id}.html`"
                                target="_blank"
                                rel="prev"
                            >
                                {{ info.prevdata.title }}
                            </nuxt-link>
                        </div>
                        <div>
                            {{ info.prevdata.push_date }}
                        </div>
                    </div>
                    <div v-if="info.nextdata">
                        <div class="name">
                            下一篇：
                            <nuxt-link
                                :to="`/information/${info.nextdata.id}.html`"
                                target="_blank"
                                rel="next"
                            >
                                {{ info.nextdata.title }}
                            </nuxt-link>
                        </div>
                        <div>
                            {{ info.nextdata.push_date }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 推荐阅读 -->
            <div class="recommendedReading_bottom">
                <!-- <recommendedReading
                    :readingList="readingList"
                    textKey="content"
                ></recommendedReading> -->
                <div class="tjyd-title"><span>推荐</span>阅读</div>
                <div class="tjyd-list">
                    <nuxt-link
                        v-for="(item, index) in readingList"
                        :key="index"
                        class="tjyd-item"
                        target="_blank"
                        :to="`/information/${item.id}.html`"
                        >{{ item.title }}</nuxt-link
                    >
                </div>
            </div>
        </div>
        <div class="page-right">
            <div class="kszx">
                <div class="title"><span>考试</span>资讯</div>
                <div class="kszx-list">
                    <nuxt-link
                        v-for="(item, index) in kszxList"
                        :key="index"
                        class="kszx-item"
                        target="_blank"
                        :to="`/information/${item.id}.html`"
                    >
                        {{ item.title }}
                    </nuxt-link>
                </div>
            </div>
            <no-ssr>
                <div class="wx-official-account">
                    <div class="wx-official-account-div">
                        <img
                            src="~/assets/images/index/wx_code.png"
                            class="pzbz-img"
                            alt=""
                        />
                        <div class="size16">
                            关注公众号
                            <!-- <div class="size12">领取<span>免费问答券</span></div> -->
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="wx-official-account-div">
                        <img
                            src="~/assets/images/index/app_code.png"
                            class="pzbz-img"
                            alt=""
                        />
                        <div class="size16">
                            下载APP
                            <div class="size12">抽奖好礼等你取</div>
                        </div>
                    </div>
                </div>

                <nuxt-link to="/service" class="qifuhaibao">
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/wtk.png"
                        alt=""
                    />
                </nuxt-link>
            </no-ssr>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

import {
    getImformationInfo,
    setCollect,
    getReadingList,
    getImformationList,
} from "@/assets/api/InformationApi.js";
import { getanalysedata } from "@/assets/api/indexApi";
import {
    goTop,
    getText,
    goTopSmooth,
    removeHTMLTags,
    internally,
} from "@/assets/utils/utils.js";

import collectionS from "@/assets/images/regulations/collection_s.png";
import collection from "@/assets/images/regulations/collection.png";
// 推荐阅读组件

export default {
    async asyncData({ params }) {
        let data = {
            id: 0,
            info: null,
            meta: {
                title: "",
                keywords: "",
                description: "",
            },
            readingList: [], //推荐阅读列表
            kszxList: [],
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/information/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
        };

        data.id = params.id.replace(".html", "");
        data.jsonld["@id"] += params.id;

        const res = await getImformationInfo({
            id: data.id,
        });
        if (res.code == 1) {
            data.info = res.data;
            data.info.content = internally(data.info.content);

            if (data.info.title) {
                data.meta.title = data.info.title + "-【小竹财税平台】";
                data.meta.description = getText(data.info.content, 90);
                data.jsonld.title = data.meta.title;
                data.jsonld.description = data.meta.description;
                data.jsonld.pubDate = data.jsonld.upDate = data.info.push_date;
            }
        }

        const res1 = await getReadingList({});
        if (res1.code == 1) {
            let arr = res1.data;
            arr.forEach((item) => {
                if (item.content) {
                    item.content = removeHTMLTags(item.content);
                }
            });
            data.readingList = arr;
        }

        var res2 = await getImformationList({
            tid: 1,
            page: 1,
            pageSize: 8,
        });
        if (res2.code == 1) {
            data.kszxList = res2.data;
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.meta.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.meta.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.meta.keywords,
                },
            ],
        };
    },
    components: {},
    data() {
        return {
            // info: null,
            title: "资讯详情",
            tid: 0,

            fontSizeList: ["font-small", "font-medium", "font-large"],
            fontSizeIndex: 1,
            collectionS: collectionS,
            collection: collection,

            // meta: {
            //     title: "",
            //     keywords: "",
            //     description: "",
            // },
            // id: 0,
            // readingList: [], //推荐阅读列表
        };
    },
    created() {
        this.getMetaInfo();
    },
    mounted() {
        console.log(this.readingList);
        let code = "PJ1";
        let describe = "";
        if (this.$route.params.type == "rmzx") {
            code = "PJ1";
            describe = "热门资讯";
        } else if (this.$route.params.type == "czzx") {
            code = "PJ2";
            describe = "财政资讯";
        } else if (this.$route.params.type == "kszx") {
            code = "PJ3";
            describe = "考试资讯";
        } else if (this.$route.params.type == "sjjc") {
            code = "PJ4";
            describe = "税局稽查";
        } else if (this.$route.params.type == "ggwz") {
            code = "PJ5";
            describe = "财税分享";
        } else {
            code = "PJ1";
            describe = "热门资讯";
        }
        getanalysedata({
            m_id: 7,
            type: 1,
            code: code,
            describe: describe + "-" + this.info.title,
        });

        this.setmenuIndex("8");
        this.$nextTick(() => {
            goTop();
        });
        this.getData();
    },
    computed: {
        ...mapState("common", {
            isFooterShow: (state) => state.isFooterShow,
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    methods: {
        ...mapMutations("common", ["setmenuIndex"]),

        async getData() {
            // const loading = this.$loading({
            //     lock: true,
            //     text: "Loading",
            //     spinner: "el-icon-loading",
            //     background: "rgba(255, 255, 255, 0.6)",
            // });
            this.title = this.$route.query.name;
            const res = await getImformationInfo({
                id: this.id,
                // tid: this.$route.query.tid,
            });
            if (res.code == 1) {
                this.info.is_collect = res.data.is_collect;
                // goTop();
                // this.info = res.data;
                // if (this.info.title) this.meta.title = this.info.title;
                // this.meta.keywords = this.info.title;
                this.meta.description = getText(this.info.content);
                // this.getRecommendList();
            }
            try {
                // loading.close();
            } catch (error) {}
        },

        getMetaInfo() {
            if (this.$route.params.type == "rmzx") {
                this.meta.keywords = "小竹财税资讯";
            } else if (this.$route.params.type == "czzx") {
                this.meta.keywords = "财政资讯";
            } else if (this.$route.params.type == "kszx") {
                this.meta.keywords = "会计考试资讯";
            } else if (this.$route.params.type == "sjjc") {
                this.meta.keywords = "税局稽查新闻";
            } else if (this.$route.params.type == "ggwz") {
                this.meta.keywords = "税务资讯";
            }
        },

        // 点击收藏
        async setCollection() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            const res = await setCollect({
                cid: this.info.id,
            });
            if (res.code == 1) {
                this.info.is_collect == 0
                    ? (this.info.is_collect = 1)
                    : (this.info.is_collect = 0);
                if (this.info.is_collect == 1) {
                    this.$message({
                        message: "收藏成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: "取消收藏",
                        type: "warning",
                    });
                }
            }
        },

        // 切换字体
        changeFontSize() {
            if (this.fontSizeIndex == 2) {
                this.fontSizeIndex = 0;
            } else {
                this.fontSizeIndex += 1;
            }
        },

        // 回到顶部
        gotop() {
            goTopSmooth();
        },

        //获取推荐阅读列表
        async getRecommendList(is = false) {
            var res =
                is && this.ReadingList
                    ? this.ReadingList
                    : await getReadingList({});
            if (res.code == 1) {
                let arr = res.data;
                arr.forEach((item) => {
                    if (item.content) {
                        item.content = removeHTMLTags(item.content);
                    }
                });
                this.readingList = arr;
            }
        },
    },
};
</script>
<style lang="scss">
.xzcs-pc-imformation-detail .page-left {
    width: 857px;
    padding-top: 22px;
}
.xzcs-pc-imformation-detail .page-right {
    width: 325px;
    padding-top: 22px;

    .kszx {
        background: #ffffff;
        border-radius: 6px;
        padding: 28px;
        .title {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            font-size: 18px;
            color: #333333;
            span {
                color: #e75151;
            }
        }
        .kszx-list {
            padding-top: 20px;
            .kszx-item {
                display: block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 14px;
                color: #333333;
                padding: 12px 0;
                border-bottom: 1px solid #f6f6f6;

                &:hover {
                    color: #1c87f3;
                }
            }
        }
    }
}

.xzcs-pc-imformation-detail .qifuhaibao {
    margin-top: 14px;
    display: block;
    position: sticky;
    top: 345px;
    width: 325px;
    img {
        width: 100%;
        height: auto;
    }
}

.xzcs-pc-imformation-detail .wx-official-account {
    width: 325px;
    background: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    color: #333333;
    margin-top: 15px;
    padding: 12px 18px 18px 15px;
    position: sticky;
    top: 98px;
    .wx-official-account-div {
        display: flex;
        align-items: center;
        .size16{
            font-size: 16px;
        }
        .size12{
            padding-top: 6px;
            font-size: 12px;
        }
    }
    .line {
        height: 1px;
        background-color: #e5e5e5;
        margin: 11px 0;
    }
    span {
        color: #fa5151;
    }
    img {
        width: 90px;
        height: 90px;
        margin-right: 10px;
        display: block;
    }
}

.xzcs-pc-imformation-detail {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 24px;
    display: flex;
    justify-content: space-between;

    .top {
        display: flex;
        align-items: center;
        color: #666666;
        font-size: 14px;

        i {
            color: #777777;
        }

        .title {
            padding-right: 6px;
            padding-left: 2px;
            font-size: 14px !important;
        }
        // a {
        //     text-decoration: none !important;
        //     color: #333333 !important;
        // }
    }

    .caozuo-list {
        display: flex;
        padding: 0 21px;
        margin-bottom: 30px;
        // justify-content: flex-end;
        align-items: center;
        height: 58px;
        background-color: #ffffff;
        border-bottom: 1px solid #f1f1f1;
        width: 857px;
        position: absolute;
        left: 0;
        top: 0;

        .top{
            width: 100%;
        }
        .caozuo-item {
            min-width: 48px;
            cursor: pointer;
            margin-left: 24px;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #666666;
            img {
                width: 20px;
                height: 20px;
                margin-right: 3px;
            }
        }
    }
    .content {
        margin: 0 auto 24px;
        margin-bottom: 0;
        background-color: #ffffff;
        padding: 80px 110px 60px;
        box-sizing: border-box;
        position: relative;
        .title {
            font-size: 26px;
            font-weight: 500;
            color: #333333;
            text-align: center;
        }

        .info {
            display: flex;
            justify-content: center;
            font-size: 12px;
            color: #999999;
            margin-top: 34px;

            > div {
                margin: 0 25px;
            }
        }

        .pic {
            text-align: center;
            margin-top: 79px;

            .img {
                width: 601px;
                height: 326px;
            }
        }

        .parse {
            margin-top: 72px;
        }
    }

    .caozuo {
        position: fixed;
        width: 60px;
        // left: calc(50vw + 600px + 5px);
        right: 1px;
        bottom: 369px;
        z-index: 999;

        .caozuo-item {
            width: 60px;
            height: 70px;
            background: #ffffff;
            margin-bottom: 2px;
            text-align: center;
            font-size: 12px;
            color: #333333;
            box-sizing: border-box;
            padding-top: 14px;
            cursor: pointer;
            user-select: none;

            img {
                width: 25px;
                height: 25px;
                display: block;
                margin: 0 auto;
                padding: 0;
                margin-bottom: 6px;
            }
        }
    }

    .parse {
        img {
            max-width: 80%;
            width: 90% !important;
            height: auto !important;
            display: block;
            margin: 0 auto;
            cursor: pointer;
        }

        p,
        span,
        a {
            font-family: ZTGB2312;
            line-height: 2;
        }
    }

    .font-small {
        p,
        span,
        a {
            font-size: 14px;
        }
    }

    .font-medium {
        p,
        span,
        a {
            font-size: 18px;
        }
    }

    .font-large {
        p,
        span,
        a {
            font-size: 22px;
        }
    }

    .prev-next {
        background-color: #ffffff;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        // padding: 0 45px 10px;
        padding: 20px 0 0;
        font-size: 14px;
        color: #999999;

        > div {
            padding-bottom: 10px;

            display: flex;
            justify-content: space-between;
            .name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 523px;
            }
            a {
                text-decoration: none !important;
                color: #333333 !important;
            }
        }

        > div:hover {
            a {
                text-decoration: underline !important;
            }
        }
    }

    .el-breadcrumb__item .is-link {
        font-weight: 400;
        color: #666666 !important;
    }

    .el-breadcrumb__inner {
        font-weight: 400;
        color: #666666 !important;
    }

    // a {
    //     text-decoration: underline !important;
    //     color: #2440b3 !important;
    // }

    .recommendedReading_bottom {
        margin-top: 20px;
        margin-bottom: 80px;
        background: #ffffff;
        border-radius: 6px;
        padding: 28px 34px;
        padding-bottom: 50px;
        .tjyd-title {
            font-weight: 600;
            font-size: 18px;
            color: #333333;

            span {
                color: #e75151;
            }
        }
        .tjyd-list {
            padding-top: 10px;
            .tjyd-item {
                margin-top: 46px;
                font-size: 15px;
                color: #666666;
                line-height: 21px;
                display: block;
                &:hover {
                    text-decoration: underline;
                }
                &::after {
                    content: "";
                    border-bottom: 1px dashed #e1e1e1;
                    position: relative;
                    top: 23px;
                    width: 100%;
                    display: block;
                }
            }
        }
    }
}

.xzcs-pc-imformation-detail .breadcrumb-title {
    max-width: 360px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>